<!DOCTYPE html>
<html>

	<head>
		<title>LineString arrows example</title>
		<script src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/ol-debug.js"></script>

	</head>

	<body>
		<div class="container-fluid">

			<div class="row-fluid">
				<div class="span12">
					<div id="map" class="map"></div>
				</div>
			</div>

		</div>
		<script>
			var raster = new ol.layer.Tile({
				source: new ol.source.MapQuest({
					layer: 'sat'
				})
			});
			var source = new ol.source.Vector();
			var rotation;
			/*
			 * 回调函数
			 * var styles = [
				// linestring
				new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: 'red',
						width: 2
					})
				}),
				new ol.style.Style({
					geometry: function(feature) {
						var end;
						feature.getGeometry().forEachSegment(function(start,end){
							var dx = end[0] - start[0];
							var dy = end[1] - start[1];
							rotation = Math.atan2(dy, dx);
							this.end = end;
						});
						console.log(rotation);
						return new ol.geom.Point(this.end);
					},
					image: new ol.style.Icon({
						src: 'img/arrow.png',
						anchor: [0.75, 0.5],
						rotateWithView: false,
						rotation: -rotation
					})
				})
			];*/
			var styleFunction = function(feature, resolution) {
				var geometry = feature.getGeometry();
				var styles = [
					// linestring
					new ol.style.Style({
						stroke: new ol.style.Stroke({
							color: '#ffcc33',
							width: 2
						})
					})
				];
				geometry.forEachSegment(function(start, end) {
					var dx = end[0] - start[0];
					var dy = end[1] - start[1];
					var rotation = Math.atan2(dy, dx);
					// arrows
					styles.push(new ol.style.Style({
						geometry: new ol.geom.Point(end),
						image: new ol.style.Icon({
							src: 'data/arrow.png',
							anchor: [0.75, 0.5],
							rotateWithView: false,
							rotation: -rotation
						})
					}));
				});
				return styles;
			};
			var vector = new ol.layer.Vector({
				source: source,
				style: styles
			});
			var map = new ol.Map({
				layers: [raster, vector],
				target: 'map',
				view: new ol.View({
					center: [-11000000, 4600000],
					zoom: 4
				})
			});
			map.addInteraction(new ol.interaction.Draw({
				source: source,
				type: /** @type {ol.geom.GeometryType} */ ('LineString')
			}));
		</script>
	</body>

</html>